// import React from 'react';
// import React from 'react';
import React from 'react';
// class MyComponent extends React.Component {
//     constructor(props) {
//       super(props);
//       this.myTextInput = React.createRef();
//       this.handleClick = this.handleClick.bind(this)
//     }
//     handleClick() {
//       this.myTextInput.current.focus();
//     }
//     render() {
//       return (
//         <div>
//           <input type="text" ref={this.myTextInput} />
//           <input type="button" value="Focus the text input" onClick={this.handleClick} />
//         </div>
//       );
//     }
//   }

class MyComponent extends React.Component {
    constructor(props) {
        //继承数据
        super(props);
        this.state = {
            title: '你好',
            value: 'Hello!'
        }
        this.myTextInput = React.createRef();
        this.handleClick = this.handleClick.bind(this);
        this.hand = this.hand.bind(this);
        this.handleChange = this.handleChange.bind(this)

    }
    handleClick() {
        this.myTextInput.current.focus();
    }
    hand() {
        this.setState({ title: '程文' });
    }
    handleChange(event) {
        // console.log(event,'shuju ')
        this.setState({ value: event.target.value });
    }
    render() {
        // let title = this.state.title;
        let { title } = this.state;
        var value = this.state.value;

        return (

            <div>
                <input type="text" ref={this.myTextInput} />
                <input type="button" value="Focus the text input" onClick={this.handleClick} />
                <button onClick={this.hand}>按钮  </button>
                <p>{title}</p>
                <input type="text" value={value} onChange={this.handleChange} />
                <p>{value}</p>
            </div>
        );
    }
}

export default MyComponent